<template>
	<view class="flex-column-view">
		<view class="flex-1 scroll-y">
			<view class="code-box">
				<view class="title text-ellipsis-l2">唯蔓妮丨会员免单节唯蔓妮</view> 
				<image class="code" src="https://free.picui.cn/free/2025/10/17/68f23bfa69ad8.png" mode="aspectFill"></image>
				<view class="dashed"></view>
				<view class="desc">
					请向工作人员出示
				</view>
			</view>
			<view class="store-list">
				<view class="title-row">
					<view class="title">适用门店</view>
					<view class="desc">
						仅能选择其中一家进行核销
					</view>
				</view>
				<StoreCard :storeList="storeList" />
			</view>
			<view class="safe-area-bottom"></view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import StoreCard from '@/components/StoreCard/index.vue'

const storeList = ref([10, 2, 3, 4, 5])
</script>

<style>
	page {
		background: linear-gradient(180deg, #E8DEFF 0%, #F3F5F9 99.31%);
	}
</style>

<style lang="scss" scoped>
.code-box {
	position: relative;
	overflow: hidden;
	margin: 50rpx 0;
	// width: 688rpx;
	height: 688rpx;
	text-align: center;
	background-image: url('https://free.picui.cn/free/2025/10/17/68f23bfb94151.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	.title {
		 margin: 40rpx;
		 text-align: center;
		 font-size: 34rpx;
		 font-weight: 700;
		 color: #fff;
	}
	.code {
		width: 342rpx;
		height: 342rpx;
		margin: 0 auto;
	}
	.dashed {
		position: absolute;
		left: 28rpx;
		right: 28rpx;
		bottom: 138rpx;
		height: 1rpx;
		background-image: linear-gradient(to right, #EDE8FC 50%, transparent 0);
		background-size: 10rpx 1rpx;
		background-repeat: repeat-x;
	}
	:deep(.dashed .nut-divider) {
		margin: 0;
		color: #EDE8FC;
	}
	.desc {
		position: absolute;
		left: 50%;
		bottom: 50rpx;
		transform: translateX(-50%);
		color: #DBC7FF;
	}
}
.store-list {
	overflow: hidden;
	margin: 28rpx 20rpx;
	padding: 0 14rpx;
	border-radius: 40rpx;
	background-color: #fff;
	.title-row {
		padding: 34rpx 44rpx;
		display: flex;
		align-items: center;
		gap: 10rpx;
		.title {
			font-size: 32rpx;
			font-weight: 700;
		}
		.desc {
			font-size: 24rpx;
			color: #BFBFBF;
		}
	}
}
.safe-area-bottom {
	height: 40rpx;
}
</style>